<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="exam/papers/papers_share">
    <input type="hidden" name="papers_id" value="{$ids}">
    <div class="form-group">

        <label class="control-label col-xs-12 col-sm-2" style="width: 50%;"><input type="radio" value="1" name="option" id="option1" onclick="enableSelect()">选择教师:</label>
        <div class="col-xs-12 col-sm-8" style="width: 50%;">
            <select id="selectBox" name="profile_id" disabled>
                <option value="0">请选择</option>
                {volist name="list" id="vo"}
                <option value="{$vo.profile_id}">{$vo.realname}</option>
                {/volist}
            </select>
        </div>
    </div>
    <div class="form-group">

        <label class="control-label col-xs-12 col-sm-2" style="width: 50%;"><input type="radio" value="2" name="option" id="option2" onclick="disableSelect()" checked>公共作业库:</label>
        <div class="col-xs-12 col-sm-8" style="width: 50%;">
        </div>
    </div>

    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-success btn-embossed ">{:__('OK')}</button>
            <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
        </div>
    </div>
</form>
<script>
    function enableSelect() {
        document.getElementById('selectBox').disabled = false;
    }

    function disableSelect() {
        document.getElementById('selectBox').disabled = true;
    }
</script>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f0f0f0;
        margin: 0;
        padding: 20px;
    }
    .control-label {
        text-align: left !important;
    }
    .form-group{
        display: flex;
        align-items: center;
    }
    form {
        background-color: #FFF;
        padding: 20px;
        border-radius: 5px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        max-width: 300px;
        margin: 0 auto;
    }

    input[type="radio"] {
        margin-right: 10px;
    }

    select {
        width: 100%;
        padding: 8px;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
    }

    input[type="radio"], label {
        display: inline-block;
    }
</style>
<!--<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            margin: 0;
            padding: 20px;
        }

        form {
            background-color: #FFF;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            max-width: 300px;
            margin: 0 auto;
        }

        input[type="radio"] {
            margin-right: 10px;
        }

        select {
            margin-top: 10px;
            width: 100%;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }

        input[type="radio"], label {
            display: inline-block;
            vertical-align: middle;
        }
    </style>
</head>
<body>
<form>
    <input type="radio" name="option" id="option1" onclick="enableSelect()">
    <label for="option1">选项1</label><br>
    <input type="radio" name="option" id="option2" onclick="disableSelect()" checked>
    <label for="option2">选项2</label><br>

    <select id="selectBox" disabled>
        <option value="1">选项1</option>
        <option value="2">选项2</option>
        <option value="3">选项3</option>
    </select>
</form>

<script>
    function enableSelect() {
        document.getElementById('selectBox').disabled = false;
    }

    function disableSelect() {
        document.getElementById('selectBox').disabled = true;
    }
</script>
</body>
</html>-->
